import {Component} from 'react';
import {connect} from 'react-redux';
import axios from 'axios';
import * as Notification from 'modules/notification/actions';
import Session from 'modules/auth/session';
import styled from "styled-components";
import {Button, Empty, Input, Modal, PageHeader, Radio, Table} from 'antd';

const ButtonGroup = Button.Group;
const {TextArea, Search} = Input;
const Outer = styled.div`
  border:1px solid #ececec;
  margin:20px;
   box-shadow: 3px 3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.2);
`;


const Conten = styled.div`
  margin: 20px;
  box-sizing:border-box;
`;
const ContenTiTle = styled.div`
padding:1px;
 background:#f1f1f1;
`;
const ContenList = styled.div`
  display:flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
`;
const CenterName = styled.div`
  width:180px;
  font-size:14px;
  color:#000;
  text-align:right;
  padding-right:15px;
`;
const CenterInputOuter = styled.div`
  width:400px;
  font-size:14px;
  color:#000;
`;


const RightBox = styled.div`
  float:right;
`;

const RightImportBox = styled.div`
  position:relative;
  display:inline-block;
  overflow:hidden;
`;

const tipsObj = {
    UserId: '用户主键，整数，取值1~10000数字，必须唯一!',
    imsi: '用户IMSI，长度15位字符串，取值0~9数字，必须唯一!',
    ki: '用户鉴权键，长度32位字符串，取值0~9，a~f，A~F!',
    amf: ' 运营商管理域，长度4位字符串，取值0~9，a~f，A~F!',
    op: '可变算法配置域，长度32位字符串，取值0~9，a~f，A~F!',
    opc: '可变算法配置域，长度32位字符串，取值0~9，a~f，A~F!',
    dnnInfo: 'DNN签约信息，长度512位字符串，最大配8个合法DNN，只在静态IP的时候有签约效果，不签约DNN不影响UE建立PDU会话!',
    // rand:"rand值请按需输入",
    // sqn:"sqn值请按需输入"
}


class Collection extends Component {
    state = {
        search: '',
        document: {
            action: '',
            visible: false,
            dimmed: false
        },
        confirm: {
            visible: false,
            imsi: ''
        },
        view: {
            visible: false,
            disableOnClickOutside: false,
            imsi: ''
        },
        visible: false,
        modelTitle: '新增开户（op和opc二者选其一，不可同时生效）',
        configData: {},
        selectedRowKeys: [], // Check here to configure the default column
        loading: false,
        accountData: [],
        accountDataAtTable: [],
        searchValue: '',
        UserId: '',
        imsi: '',
        ki: '',
        amf: '8000',
        op: '',
        opc: '',
        dnnInfo: '',
        opOropc: '',
        // rand:'',
        // sqn:''
    };


    onSelectChange = selectedRowKeys => {
        this.setState({selectedRowKeys});
    };


    componentWillMount() {

        const {dispatch} = this.props
        let $this = this
        const sessionData = new Session();
        const csrf = ((sessionData || {}).session || {}).csrfToken;
        const authToken = ((sessionData || {}).session || {}).authToken;
        let headers = {'X-CSRF-TOKEN': csrf}
        if (authToken) {
            headers['Authorization'] = "Bearer " + authToken
        }

        axios({
            baseURL: '/api/db',
            headers: headers,
            method: "get",
            url: '/amf',
            params: {},
            // data
        }).then(res => {
            var configData = res.data[0].config
            $this.setState({
                    configData: res.data[0],
                    accountData: configData.accountData || [],
                    accountDataAtTable: configData.accountData || [],
                    searchValue: ''
                }
            )

        })
    }

    getSData = () => {
        const {dispatch} = this.props
        let $this = this
        const sessionData = new Session();
        const csrf = ((sessionData || {}).session || {}).csrfToken;
        const authToken = ((sessionData || {}).session || {}).authToken;
        let headers = {'X-CSRF-TOKEN': csrf}
        if (authToken) {
            headers['Authorization'] = "Bearer " + authToken
        }

        axios({
            baseURL: '/api/db',
            headers: headers,
            method: "get",
            url: '/amf',
            params: {},
            // data
        }).then(res => {
            var configData = res.data[0].config
            $this.setState({
                    configData: res.data[0],
                    accountData: configData.accountData || [],
                    accountDataAtTable: configData.accountData || [],
                    selectedRowKeys: [],
                    searchValue: ''
                }
            )

            dispatch(Notification.success({
                title: '提示',
                message: `开户销户参数列表刷新成功！`
            }));
        })
    }

    handleOk = e => {
        let $this = this

        let editorBol = false
        if (this.state.modelTitle == '修改开户信息（op和opc二者选其一，不可同时生效）') {
            editorBol = true
        }

        function sterTo8(str) {
            console.log(str)
            if (str == '' || str == undefined) {
                return null
            } else {
                var getString = str.split('')
                var endStr = ''
                getString.forEach((a, b) => {
                    endStr = endStr + a
                    if (b % 8 == 0 && b != 0) {
                        endStr = endStr + ' '
                    }
                })
                return endStr
            }
        }

        const {dispatch} = this.props
        let sendData = JSON.parse(JSON.stringify(this.state.configData))
        sendData.config.accountData = sendData.config.accountData || []
        let sendLine = {}
        sendLine.imsi = this.state.imsi
        sendLine.ki = this.state.ki
        sendLine.amf = this.state.amf
        sendLine.op = this.state.op
        sendLine.opc = this.state.opc
        sendLine.dnnInfo = this.state.dnnInfo
        // sendLine.rand = this.state.rand
        // sendLine.sqn = this.state.sqn
        //TODO dnnInfo通过关联取值
        if (this.state.opOropc == '') {
            dispatch(Notification.error({
                title: '提示', autoDismiss: 4,
                message: `请选择op或opc！`
            }));
            return false
        }
        var pattern = /^(\d|[A-Z]){32}/;
        if (this.state.opOropc == 'op') {
            if (sendLine.op == '' || sendLine.op == undefined || sendLine.op == null) {
                dispatch(Notification.error({
                    title: '提示', autoDismiss: 4,
                    message: `选择了op，op的值不能为空！`
                }));
                return false
            } else {
                if (!pattern.test(sendLine.op)) {
                    dispatch(Notification.error({
                        title: '提示', autoDismiss: 4,
                        message: `op格式错误，例：B8A9C5D6B8A9C5D6B8A9C5D6B8A9C5D6！`
                    }));
                    return false

                }

            }
        }

        if (this.state.opOropc == 'opc') {
            if (sendLine.opc == '' || sendLine.opc == undefined || sendLine.opc == null) {
                dispatch(Notification.error({
                    title: '提示', autoDismiss: 4,
                    message: `选择了opc，opc的值不能为空！`
                }));
                return false
            } else {
                if (!pattern.test(sendLine.opc)) {
                    dispatch(Notification.error({
                        title: '提示', autoDismiss: 4,
                        message: `opc格式错误，例：B8A9C5D6B8A9C5D6B8A9C5D6B8A9C5D6！`
                    }));
                    return false

                }

            }
        }
        if (sendLine.imsi == '' ||
            sendLine.amf == '' ||
            sendLine.dnnInfo == '' ||
            // sendLine.rand == '' ||
            // sendLine.sqn == '' ||
            sendLine.ki == ''
        ) {
            dispatch(Notification.error({
                title: '提示', autoDismiss: 4,
                message: `开户参数的值不能为空！`
            }));
            return false
        }
        if (!pattern.test(sendLine.ki)) {
            dispatch(Notification.error({
                title: '提示', autoDismiss: 4,
                message: `ki格式错误，例：B8A9C5D6B8A9C5D6B8A9C5D6B8A9C5D6！`
            }));
            return false

        }
        if (this.state.opOropc == 'op') {
            sendLine.opc = null
        } else {
            sendLine.op = null
        }
        let hasId = false
        // sendLine.sqn =  this.state.sqn
        sendData.config.accountData.forEach(a => {
            if (sendLine.imsi == a.imsi) {
                if (editorBol) {
                    if ($this.state.UserId != a.UserId) {

                        hasId = true
                    }
                } else {
                    hasId = true
                }
            }
        })
        if (hasId) {
            dispatch(Notification.error({
                title: '提示',
                autoDismiss: 4,
                message: 'imsi重复，系统中已有imsi为' + sendLine.imsi + '的数据，请修正！',
            }));
            return false
        }
        sendLine.ki = sterTo8(sendLine.ki)
        sendLine.op = sterTo8(sendLine.op)
        sendLine.opc = sterTo8(sendLine.opc)
        if (editorBol) {
            sendData.config.accountData.forEach(a => {
                if (a.UserId == $this.state.UserId) {
                    a.imsi = sendLine.imsi
                    a.ki = sendLine.ki
                    a.amf = sendLine.amf
                    a.op = sendLine.op
                    a.opc = sendLine.opc
                    a.dnnInfo = sendLine.dnnInfo
                    // a.rand = sendLine.rand
                    // a.sqn = sendLine.sqn
                }
            })
        } else {
            sendLine.key = parseInt(Math.random() * 10000000000)
            sendLine.UserId = sendData.config.accountData.length == 0 ? 1 : (sendData.config.accountData[sendData.config.accountData.length - 1].UserId + 1)
            sendData.config.accountData.push(sendLine)
        }


        const sessionData = new Session();
        const csrf = ((sessionData || {}).session || {}).csrfToken;
        const authToken = ((sessionData || {}).session || {}).authToken;
        let headers = {'X-CSRF-TOKEN': csrf}
        if (authToken) {
            headers['Authorization'] = "Bearer " + authToken
        }

        axios({
            baseURL: '/api/db',
            headers: headers,
            method: "PATCH",
            url: '/amf/' + sendData._id,
            data: sendData,
            //
        }).then(res => {
            this.handleCancel()
            var configData = res.data.config
            $this.setState({
                    configData: res.data,
                    accountData: configData.accountData || [],
                    accountDataAtTable: configData.accountData || [],
                    selectedRowKeys: [],
                    searchValue: ''
                }
            )
            dispatch(Notification.success({
                title: '提示',
                message: `开户参数配置成功！`
            }));
        })
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    };


    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };


    _handleChange(e) {
        // 获取 input 元素上的value
        let name = e.target.name;
        let value = e.target.value;
        this.setState({
            [name]: value
        })
    };

    onRadioChange(e) {
        let value = e.target.value;
        this.setState({
            opOropc: value
        })
    };

    _handleSearcgChange(e) {
        let value = e.target.value;
        this.setState({
            searchValue: value
        })
    };

    addRow = () => {
        this.setState({
            modelTitle: '新增开户（op和opc二者选其一，不可同时生效）',
            imsi: '',
            ki: '',
            amf: '8000',
            op: '',
            opc: '',
            dnnInfo: '',
            opOropc: '',
            // rand: '',
            // sqn: '',
        })
        this.showModal()
    }

    editRow = (row, e) => {
        console.log(row)
        var opOropc = ''
        if (row.op != '' && row.op != null && row.op != undefined) {
            opOropc = 'op'
        } else {
            opOropc = 'opc'
        }
        this.setState({
            modelTitle: '修改开户信息（op和opc二者选其一，不可同时生效）',
            imsi: row.imsi,
            ki: row.ki.replace(/\s/g,''),
            amf: row.amf,
            op: opOropc == 'op'?row.op.replace(/\s/g,''):'',
            opc: opOropc == 'opc'?row.opc.replace(/\s/g,''):'',
            opOropc: opOropc,
            dnnInfo: row.dnnInfo,
            // rand: row.rand,
            // sqn: row.sqn,
            UserId: row.UserId,
        })
        this.showModal()
    }

    delRow = (row, e) => {
        const {dispatch} = this.props

        var $this = this
        Modal.confirm({
            title: '确定要删除 UserId 为 ' + row.UserId + ' 的数据么？',
            content: '删除后无法找回',
            okText: '确认',
            cancelText: '取消',
            onOk: function () {
                let sendData = JSON.parse(JSON.stringify($this.state.configData))
                let newPData = []
                sendData.config.accountData.forEach(a => {
                    if (a.UserId != row.UserId) {
                        newPData.push(a)
                    }
                })
                sendData.config.accountData = newPData

                const sessionData = new Session();
                const csrf = ((sessionData || {}).session || {}).csrfToken;
                const authToken = ((sessionData || {}).session || {}).authToken;
                let headers = {'X-CSRF-TOKEN': csrf}
                if (authToken) {
                    headers['Authorization'] = "Bearer " + authToken
                }

                axios({
                    baseURL: '/api/db',
                    headers: headers,
                    method: "PATCH",
                    url: '/amf/' + sendData._id,
                    data: sendData,
                    //
                }).then(res => {
                    $this.handleCancel()
                    var configData = res.data.config
                    $this.setState({
                            configData: res.data,
                            accountData: configData.accountData || [],
                            accountDataAtTable: configData.accountData || [],
                            selectedRowKeys: [],
                            searchValue: ''
                        }
                    )
                    dispatch(Notification.success({
                        title: '提示',
                        message: `开户参数删除成功！`
                    }));
                })
            }
        });
    }


    delSelect = () => {
        const {dispatch} = this.props

        var $this = this
        Modal.confirm({
            title: '确定要删除选中的数据么？',
            content: '删除后无法找回',
            okText: '确认',
            cancelText: '取消',
            onOk: function () {
                let sendData = JSON.parse(JSON.stringify($this.state.configData))
                let newPData = []

                sendData.config.accountData.forEach(a => {
                    let addBol = true
                    $this.state.selectedRowKeys.forEach(b => {
                        if (a.key == b) {
                            addBol = false
                        }
                    })
                    if (addBol) {
                        newPData.push(a)
                    }
                })
                sendData.config.accountData = newPData

                const sessionData = new Session();
                const csrf = ((sessionData || {}).session || {}).csrfToken;
                const authToken = ((sessionData || {}).session || {}).authToken;
                let headers = {'X-CSRF-TOKEN': csrf}
                if (authToken) {
                    headers['Authorization'] = "Bearer " + authToken
                }

                axios({
                    baseURL: '/api/db',
                    headers: headers,
                    method: "PATCH",
                    url: '/amf/' + sendData._id,
                    data: sendData,
                    //
                }).then(res => {
                    $this.handleCancel()
                    var configData = res.data.config
                    $this.setState({
                            configData: res.data,
                            accountData: configData.accountData || [],
                            accountDataAtTable: configData.accountData || [],
                            selectedRowKeys: [],
                            searchValue: ''
                        }
                    )
                    dispatch(Notification.success({
                        title: '提示',
                        message: `您选中的开户参数删除成功！`
                    }));
                })
            }
        });
    }

    delAll = () => {
        const {dispatch} = this.props

        var $this = this
        Modal.confirm({
            title: '确定要删除所有的开户数据么？',
            content: '删除后无法找回',
            okText: '确认',
            cancelText: '取消',
            onOk: function () {
                let sendData = JSON.parse(JSON.stringify($this.state.configData))
                let newPData = []

                sendData.config.accountData = newPData

                const sessionData = new Session();
                const csrf = ((sessionData || {}).session || {}).csrfToken;
                const authToken = ((sessionData || {}).session || {}).authToken;
                let headers = {'X-CSRF-TOKEN': csrf}
                if (authToken) {
                    headers['Authorization'] = "Bearer " + authToken
                }

                axios({
                    baseURL: '/api/db',
                    headers: headers,
                    method: "PATCH",
                    url: '/amf/' + sendData._id,
                    data: sendData,
                    //
                }).then(res => {
                    $this.handleCancel()
                    var configData = res.data.config
                    $this.setState({
                            configData: res.data,
                            accountData: configData.accountData || [],
                            accountDataAtTable: configData.accountData || [],
                            selectedRowKeys: [],
                            searchValue: ''
                        }
                    )
                    dispatch(Notification.success({
                        title: '提示',
                        message: `您选中的开户参数删除成功！`,

                    }));
                })
            }
        });
    }

    ImportData = () => {
        const {dispatch} = this.props
        var $this = this
        var reader = new FileReader();
        let obj = document.getElementById('csvFileInput')
        reader.readAsText(obj.files[0]);
        reader.onload = function () {
            $this.parseDataToSend(this.result)
            setTimeout(function () {
                obj.value = ''
            }, 300)
        }
    }


    parseDataToSend = (string) => {
        const {dispatch} = this.props
        let lineArray = string.split('\r\n')
        let $this = this
        let getTop = lineArray[0]
        console.log(getTop)
        if (getTop == '"UserId","imsi","ki","amf","op","opc","dnnInfo","rand","sqn"') {
            let getValArray = []
            let sendData = JSON.parse(JSON.stringify($this.state.configData))
            let newPData = JSON.parse(JSON.stringify(sendData.config.accountData))

            function sterTo8(str) {
                console.log(str)
                if (str == '' || str == undefined) {
                    return null
                } else {
                    var getString = str.split('')
                    var endStr = ''
                    getString.forEach((a, b) => {
                        endStr = endStr + a
                        if (b % 8 == 0 && b != 0) {
                            endStr = endStr + ' '
                        }
                    })
                    return endStr
                }
            }


            lineArray.forEach((item, index) => {
                if (index != 0 && item != '') {
                    let getArray = item.replace(/\"/g, '')
                    getArray = getArray.split(',')
                    let newLine = {
                        UserId: getArray[0],
                        imsi: getArray[1],
                        ki: sterTo8(getArray[2]),
                        amf: getArray[3],
                        op: sterTo8(getArray[4]),
                        opc: sterTo8(getArray[5]),
                        dnnInfo: getArray[6],
                        rand: getArray[7],
                        sqn: getArray[8],
                        key: parseInt(Math.random() * 10000000000)
                    }
                    let insert = true
                    newPData.forEach(ccc => {
                        if (ccc.UserId == newLine.UserId) {
                            ccc.imsi = newLine.imsi
                            ccc.ki = newLine.ki
                            ccc.amf = newLine.amf
                            ccc.op = newLine.op
                            ccc.opc = newLine.opc
                            ccc.dnnInfo = newLine.dnnInfo
                            ccc.rand = newLine.rand
                            ccc.sqn = newLine.sqn
                            insert = false
                        }
                    })
                    if (insert) {
                        getValArray.push(newLine)
                    }
                }
            })
            if (newPData.length + getValArray.length >= 1000) {
                dispatch(Notification.error({
                    title: '提示',
                    autoDismiss: 0,
                    message: '导入失败，数据库中数据(' + newPData.length + ')和整合之后导入的数据(' + getValArray.length + ')超出1000条，请删除部分数据再重试！',
                }));
                return false
            }
            let imsiNotOnlyBol = false
            let imsiNotOnlyArray = []
            newPData.forEach(a => {
                getValArray.forEach(b => {
                    if (a.imsi == b.imsi) {
                        imsiNotOnlyBol = true
                        imsiNotOnlyArray.push(b.imsi)
                    }
                })
            })
            if (imsiNotOnlyBol) {
                dispatch(Notification.error({
                    title: '导入失败',
                    autoDismiss: 0,
                    message: `
导入的数据中有imsi重复切不是用一用户ID！
请修正数据后再重试!
重复的imsi有：` + imsiNotOnlyArray.toString(),
                }));
                return false
            }
            newPData = newPData.concat(getValArray)
            sendData.config.accountData = newPData


            const sessionData = new Session();
            const csrf = ((sessionData || {}).session || {}).csrfToken;
            const authToken = ((sessionData || {}).session || {}).authToken;
            let headers = {'X-CSRF-TOKEN': csrf}
            if (authToken) {
                headers['Authorization'] = "Bearer " + authToken
            }
            console.log(sendData)
            axios({
                baseURL: '/api/db',
                headers: headers,
                method: "PATCH",
                url: '/amf/' + sendData._id,
                data: sendData,
                //
            }).then(res => {
                $this.handleCancel()
                var configData = res.data.config
                $this.setState({
                        configData: res.data,
                        accountData: configData.accountData || [],
                        accountDataAtTable: configData.accountData || [],
                        selectedRowKeys: [],
                        searchValue: ''
                    }
                )
                dispatch(Notification.success({
                    title: '提示',
                    message: '整合修改的数据后，成功导入' + getValArray.length + '条开户参数！'
                }));
            })


        } else {
            dispatch(Notification.success({
                title: '提示',
                message: `请上传正确的CVS文件，可点击导出下载文件模板！`
            }));
        }
    }

    exportData = () => {
        const {dispatch} = this.props
        let CVSString = ''
        const exportArray = JSON.parse(JSON.stringify(this.state.accountData))

        CVSString += '"UserId","imsi","ki","amf","op","opc","dnnInfo","rand","sqn"'
        exportArray.forEach(ot => {
            CVSString += '\r\n'
            CVSString += '"' + ot.UserId +
                '","' + ot.imsi +
                '","' + ot.ki +
                '","' + ot.amf +
                '","' + ot.op || '' +
                '","' + ot.opc || '' +
                '","' + ot.dnnInfo +
                '","' + ot.rand || '' +
                '","' + ot.sqn || '' +
                '"'
        })
        CVSString += '\r\n'
        console.log(CVSString)

        var msieversion = function () {
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");
            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
            {
                return true;
            } else { // If another browser,
                return false;
            }
            return false;
        };


        var fileName = "AMF-开户销户参数列表" + parseInt(Math.random() * 9999999);
        if (msieversion()) {
            var IEwindow = window.open();
            IEwindow.document.write('sep=,\r\n' + CVSString);
            IEwindow.document.close();
            IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
            IEwindow.close();
        } else {
            //var uri = 'data:application/csv;charset=utf-8,' + escape(CSV);
            var uri = 'data:application/csv;charset=utf-8,' + CVSString;
            var link = document.createElement("a");
            link.href = uri;
            link.style = "visibility:hidden";
            link.download = fileName + ".csv";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }


    }

    searchData = (val) => {
        let newAry = []
        this.state.accountData.forEach(a => {
            if (a.imsi.toString().indexOf(val.toString()) >= 0) {
                newAry.push(a)
            }
        })
        this.setState({
            accountDataAtTable: newAry
        })
    }

    render() {
        let $this = this
        const {loading, selectedRowKeys} = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;


        const columns = [
            {
                title: '操作',
                dataIndex: '',
                key: 'y',
                width: 240,
                render: (text, record) => {
                    return (
                        <div>

                            <ButtonGroup>

                                <Button type="primary" onClick={(e) => this.editRow(record, e)}>修改</Button>
                                <Button type="danger" onClick={(e) => this.delRow(record, e)}>删除</Button>
                            </ButtonGroup>
                        </div>
                    )
                },
            },
            {
                title: 'UserId',
                dataIndex: 'UserId',
            },
            {
                title: 'imsi',
                dataIndex: 'imsi',
            },
            {
                title: 'KI',
                dataIndex: 'ki',
            },
            {
                title: 'amf',
                dataIndex: 'amf',
            },
            {
                title: 'OP',
                dataIndex: 'op',
            },
            {
                title: 'OPC',
                dataIndex: 'opc',
            },
            {
                title: 'dnnInfo',
                dataIndex: 'dnnInfo',
            },

            // {
            //     title: 'rand',
            //     dataIndex: 'rand',
            // },
            //
            // {
            //     title: 'sqn',
            //     dataIndex: 'sqn',
            // },

        ];


        return (
            <div>
                <PageHeader
                    style={{
                        border: '1px solid rgb(235, 237, 240)',
                    }}
                    title="开户销户参数列表"
                    subTitle="用户数最多20000个，激活用户数最多10000个，激活会话数最多10000个"
                />
                <Outer loading={true}>
                    <Conten>
                        <div>
                            <div style={{marginBottom: 16}}>
                                <Button type="success"
                                        title={this.state.accountData.length >= 1000 ? '开户参数最多只能有1000个' : ''}
                                        disabled={this.state.accountData.length >= 1000} onClick={this.addRow}>
                                    新增
                                </Button>

                                <span>&nbsp;&nbsp;</span>
                                <Button type="danger" disabled={this.state.selectedRowKeys.length == 0} ghost
                                        onClick={this.delSelect}>
                                    批量删除
                                </Button>

                                <span>&nbsp;&nbsp;</span>
                                <Button type="danger" onClick={this.delAll}>
                                    全部删除
                                </Button>
                                <span>&nbsp;&nbsp;</span>
                                <Button type="primary" onClick={this.getSData}>
                                    刷新
                                </Button>
                                <span>
                                    &nbsp;&nbsp;共{this.state.accountDataAtTable.length}条数据&nbsp;&nbsp;&nbsp;&nbsp;
                                </span>
                                <span
                                    style={{
                                        marginLeft: 8,
                                        color: '#999'
                                    }}>{hasSelected ? `已选中 ${selectedRowKeys.length} 条数据` : ''}
                                </span>
                                <RightBox>
                                    <RightImportBox>
                                        <Button type="primary" ghost>
                                            导入
                                        </Button>
                                        <input type="file" className={'inputImportBtns'} id="csvFileInput"
                                               onChange={(e) => this.ImportData(e)}/>
                                    </RightImportBox>

                                    <span>&nbsp;&nbsp;</span>
                                    <RightImportBox>
                                        <Button type="primary" onClick={this.exportData}>
                                            导出
                                        </Button>
                                    </RightImportBox>
                                    <span>&nbsp;&nbsp;</span>
                                    <RightImportBox>
                                        <Search
                                            allowClear
                                            value={this.state.searchValue}
                                            onChange={(e) => this._handleSearcgChange(e)}
                                            placeholder="输入imsi值进行查询"
                                            onSearch={value => this.searchData(value)}
                                            style={{width: 200}}
                                        />
                                    </RightImportBox>
                                </RightBox>
                            </div>
                            <Table
                                locale={
                                    {
                                        emptyText: () => {
                                            return (
                                                <Empty
                                                    description={
                                                        <span>暂无数据</span>
                                                    }
                                                />
                                            )
                                        }
                                    }
                                }
                                rowSelection={rowSelection}
                                columns={columns} dataSource={this.state.accountDataAtTable}/>
                        </div>
                    </Conten>
                </Outer>


                <Modal
                    title={this.state.modelTitle}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    width={800}
                    cancelText="取消"
                >
                    <ContenTiTle>
                        <ContenList>
                            <CenterName><strong>参数名</strong></CenterName>
                            <CenterInputOuter>
                                <strong>值</strong>
                            </CenterInputOuter>
                        </ContenList>
                    </ContenTiTle>
                    <ContenList>
                        <CenterName>imsi</CenterName>
                        <CenterInputOuter>
                            <Input
                                value={this.state.imsi}
                                name={'imsi'}
                                onChange={(e) => this._handleChange(e)}
                                maxLength={15}
                                required
                                type={'number'}
                                placeholder={tipsObj.imsi}
                                title={tipsObj.imsi}
                            /></CenterInputOuter>
                    </ContenList>

                    <ContenList>
                        <CenterName>KI</CenterName>
                        <CenterInputOuter>
                            <Input
                                value={this.state.ki}
                                name={'ki'}
                                onChange={(e) => this._handleChange(e)}
                                maxLength={32}
                                required
                                placeholder={tipsObj.ki}
                                title={tipsObj.ki}
                            /></CenterInputOuter>
                    </ContenList>

                    <ContenList>
                        <CenterName>amf</CenterName>
                        <CenterInputOuter>
                            <Input
                                value={this.state.amf}
                                name={'amf'}
                                onChange={(e) => this._handleChange(e)}
                                maxLength={4}
                                readOnly={true}
                                required
                                placeholder={tipsObj.amf}
                                title={tipsObj.amf}
                            /></CenterInputOuter>
                    </ContenList>

                    <ContenList>
                        <CenterName>
                            <span style={{'position': 'relative', 'left': '15px'}}>
                                <Radio.Group onChange={(e) => this.onRadioChange(e)} value={this.state.opOropc}>
                                    <Radio value={'op'}><span
                                        style={{fontWeight: "normal", color: '#000'}}>OP</span></Radio>
                                </Radio.Group>
                            </span>
                        </CenterName>
                        <CenterInputOuter>
                            <Input
                                value={this.state.op}
                                name={'op'}
                                onChange={(e) => this._handleChange(e)}
                                maxLength={32}
                                required
                                placeholder={tipsObj.op}
                                title={tipsObj.op}
                            /></CenterInputOuter>
                    </ContenList>
                    <ContenList>
                        <CenterName><span style={{'position': 'relative', 'left': '15px'}}>
                                <Radio.Group onChange={(e) => this.onRadioChange(e)} value={this.state.opOropc}>
                                    <Radio value={'opc'}><span style={{fontWeight: "normal", color: '#000'}}>OPC</span></Radio>
                                </Radio.Group>
                            </span></CenterName>
                        <CenterInputOuter>
                            <Input
                                value={this.state.opc}
                                name={'opc'}
                                onChange={(e) => this._handleChange(e)}
                                maxLength={32}
                                required
                                placeholder={tipsObj.opc}
                                title={tipsObj.opc}
                            /></CenterInputOuter>
                    </ContenList>
                    {/*<ContenList>*/}
                    {/*    <CenterName>rand</CenterName>*/}
                    {/*    <CenterInputOuter>*/}
                    {/*        <Input*/}
                    {/*            value={this.state.rand}*/}
                    {/*            name={'rand'}*/}
                    {/*            onChange={(e) => this._handleChange(e)}*/}
                    {/*            maxLength={32}*/}
                    {/*            required*/}
                    {/*            placeholder={tipsObj.rand}*/}
                    {/*            title={tipsObj.rand}*/}
                    {/*        /></CenterInputOuter>*/}
                    {/*</ContenList>*/}

                    {/*<ContenList>*/}
                    {/*    <CenterName>sqn</CenterName>*/}
                    {/*    <CenterInputOuter>*/}
                    {/*        <Input*/}
                    {/*            value={this.state.sqn}*/}
                    {/*            name={'sqn'}*/}
                    {/*            autoSize={true}*/}
                    {/*            onChange={(e) => this._handleChange(e)}*/}
                    {/*            maxLength={512}*/}
                    {/*            required*/}
                    {/*            placeholder={tipsObj.sqn}*/}
                    {/*            title={tipsObj.sqn}*/}
                    {/*        /></CenterInputOuter>*/}
                    {/*</ContenList>*/}
                    <ContenList>
                        <CenterName>dnnInfo</CenterName>
                        <CenterInputOuter>
                            <TextArea
                                value={this.state.dnnInfo}
                                name={'dnnInfo'}
                                autoSize={true}
                                onChange={(e) => this._handleChange(e)}
                                maxLength={512}
                                required
                                placeholder={tipsObj.dnnInfo}
                                title={tipsObj.dnnInfo}
                            /></CenterInputOuter>
                    </ContenList>


                </Modal>
            </div>
        )
    }
}

Collection = connect(
    (state) => ({})
)(Collection);

export default Collection;